<template>
    <div class="screenfull">
        <i v-if="full" class="iconfont icon-exitfullscreen screen" @click="exitFullScreen"></i>
        <i v-else class="iconfont icon-fullscreen screen" @click="fullScreen"></i>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import screenfull from 'screenfull'

const full = ref<boolean>(false)
const fullScreen = () => {
  if (screenfull.isEnabled && !screenfull.isFullscreen) {
    screenfull.request()
    full.value = !full.value
  }
}

const exitFullScreen = () => {
  if (screenfull.isEnabled && screenfull.isFullscreen) {
    screenfull.exit()
    full.value = !full.value
  }
}
</script>

<style lang='scss' scoped>
.screenfull {
  margin: 0 10px;
}

.screen:hover {
  cursor: pointer;
  color: var(--el-color-primary);
}

i {
  font-size: 25px;
}
</style>